<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户信息页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        .container {
            width: 80%;
            margin: 50px auto;
            padding: 20px;
            background-color: #ffffff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            font-size: 1.5em;
            color: #333;
        }

        .logout-btn {
            background-color: #ff4d4d;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 1em;
            cursor: pointer;
        }

        .logout-btn:hover {
            background-color: #e60000;
        }

        .user-info {
            display: flex;
            margin-top: 20px;
        }

        .avatar {
            flex: 1;
            text-align: center;
        }

        .avatar img {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            object-fit: cover;
        }

        .avatar input {
            text-align: center;
        }

        .details {
            flex: 2;
            margin-left: 20px;
        }

        .details label {
            display: block;
            margin: 10px 0 5px;
            font-size: 1.2em;
            color: #555;
        }

        .details input {
            width: 80%;
            padding: 8px;
            margin-bottom: 15px;
            font-size: 1em;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .actions {
            margin-top: 30px;
            text-align: center;
        }

        .actions button,#save-btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 1em;
            border-radius: 5px;
            cursor: pointer;
        }

        .actions button:hover {
            background-color: #0056b3;
        }

        .hidden {
            display: none !important;
        }

        .back-btn {
            background-color: #666;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
        }
        
        .back-btn:hover {
            background-color: #555;
        }
        
        .button-group {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        /* 修改按钮组样式 */
        .edit-buttons {
            display: none;  /* 默认隐藏编辑按钮组 */
        }

        /* 添加显示类 */
        .show {
            display: flex !important;
            gap: 10px;
            justify-content: center;
            margin-top: 10px;
        }

        /* 取消修改和确认修改按钮的共同样式 */
        .cancel-btn, .save-btn {
            background-color: #666;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
        }

        .cancel-btn:hover, .save-btn:hover {
            background-color: #555;
        }

        /* 修改个人信息按钮样式 */
        #edit-btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 1em;
            border-radius: 5px;
            cursor: pointer;
        }

        #edit-btn:hover {
            background-color: #0056b3;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            // 保存原始值
            let originalValues = {
                name: '${user.name}',
                email: '${user.email}',
                avatar: '${user.avatar}'
            };
            
            // 添加预览头像的功能
            document.getElementById('avatar-input').onchange = function(e) {
                var file = e.target.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        document.getElementById('avatar-img').src = e.target.result;
                    }
                    reader.readAsDataURL(file);
                }
            };
            
            // 点击修改按钮
            $('#edit-btn').click(function() {
                // 移除只读属性
                $('#name, #email').removeAttr('readonly');
                $('#avatar-input').removeClass('hidden');
                // 隐藏修改按钮，显示编辑按钮组
                $(this).hide();
                $('#edit-buttons').addClass('show');
            });
            
            // 取消修改
            $('.cancel-btn').click(function() {
                // 恢复原始值
                $('#name').val(originalValues.name);
                $('#email').val(originalValues.email);
                $('#avatar-img').attr('src', 'static/img/头像/' + originalValues.avatar);
                $('#avatar-input').val('').addClass('hidden');
                
                // 恢复只读属性
                $('#name, #email').attr('readonly', true);
                
                // 隐藏编辑按钮组，显示修改按钮
                $('#edit-buttons').removeClass('show');
                $('#edit-btn').show();
            });

            // 表单提交前验证
            $('#user-form').on('submit', function(e) {
                var name = $('#name').val().trim();
                var email = $('#email').val().trim();
                
                if (!name) {
                    alert('姓名不能为空');
                    e.preventDefault();
                    return false;
                }
                
                if (!email) {
                    alert('邮箱不能为空');
                    e.preventDefault();
                    return false;
                }
            });

            // 注销提示
            $('.logout-btn').click(function() {
                alert('您已注销！');
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>用户信息</h1>
            <div class="button-group">
                <button type="button" class="back-btn" onclick="window.history.back()">返回上一页</button>
                <form action="/221210400201/infoChange">
                    <input type="hidden" name="action" value="delete">
                    <input class="logout-btn" type="submit" value="注销"/>
                </form>
            </div>
        </div>
        <form id="user-form" action="infoChange" method="post" enctype="multipart/form-data">
            <div class="user-info">
                <div class="avatar">
                    <img id="avatar-img" src="static/img/头像/${user.avatar}" alt="用户头像">
                    <input id="avatar-input" name="avatar" type="file" class="hidden" accept="image/*">
                </div>
                <div class="details">
                    <label for="name">姓名</label>
                    <input id="name" name="name" type="text" value="${user.name}" readonly>

                    <label for="account">账号</label>
                    <input id="account" name="username" type="text" value="${user.username}" readonly>

                    <label for="email">邮箱</label>
                    <input id="email" name="email" type="email" value="${user.email}" readonly>

                    <label for="status">状态</label>
                    <input id="status" name="state" type="text" value="在线" readonly>
                </div>
            </div>
            <div class="actions">
                <button type="button" id="edit-btn">修改个人信息</button>
                <input type="hidden" name="action" value="change">
                <div class="edit-buttons" id="edit-buttons">
                    <button type="button" class="cancel-btn">取消修改</button>
                    <input type="submit" class="save-btn" value="确认修改">
                </div>
            </div>
        </form>
    </div>
</body>
</html>
